<template>
  <div class="map">
    <div class="map-container">
      <div class="map-container-title">xxx标题</div>
      <div class="map-chart" id="mapEchart"></div>
    </div>
  </div>
</template>

<script>
import mixins from "./mixins.js";
import { getMap } from "./maputils.js";
import geoJson from "./china.json"

export default {
  // mixins: [mixins],
  props: {
    cityMapName: {
      type: String,
      require: false,
      default: '中国'
    }
  },
  data() {
    return {
      citylist: [{ 中国: "401200965" }],
      lastCity: {},
      mapName: "china",
      mode: "2",
      myChart: {}
    };
  },
  watch: {
    // 监听父组件中的数据变化
    echartsData: {
      deep: true,
      handler(val) {
        this.initCharts(val)
      }
    },
    // 监听省份变化
    province: {
      deep: true,
      handler(val) {
        this.mapActive(val)
      }
    }
  },
  mounted() {
    this.chartMap()
  },
  beforeDestroy() {
    // 防止内存泄露
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  methods: {
    chartMap() {
      // 图表配置项
      let option = {
        tooltip: {
          show: true,
          formatter: (params) => {
            // console.log('tooltip', params)
          }
          // trigger: "item",
          // alwaysShowContent: false,
          // // padding: [0, 10, 8, 10],
          // roam: true, // 是否开启缩放和平移
          // hideDelay: 100,
          // triggerOn: "mousemove",
          // enterable: true,
          // backgroundColor: "#fff",
          // //解决浮窗被遮挡
          // confine: true,
          // textStyle: {
          //   color: "#333",
          //   fontSize: "12",
          //   width: 20,
          //   height: 30,
          //   overflow: "break",
          // },
          // showDelay: 50,
          // className: 'custom-tooltip-box',
          // formatter: (params) => {
          //   // font-family: YouSheBiaoTiHei;
          //   var htmlStr = `
          //   <div class='custom-tooltip-style1'>
          //     <div class='content'>
          //     <p style="line-height: 30px; height: 30px; font-weight: 600;
          //     font-style: italic; font-size: 20px; color: #FFFFFF;"
          //     >${params.name}</p>
              
          //     <div style="margin-top: 0px; margin-left: 10px">
          //       <div class="text-box">
          //         <span style="line-height: 30px; font-size: 18px; color: #CBDDF2;">机器人</span>
          //         <span style="line-height: 30px; font-size: 18px; font-weight: 600; font-style: italic; color: #D5D9FF;"> ${params.data.info.robotNum}个</span>
          //       </div>
          //       <div class="text-box">
          //         <span style="line-height: 30px; font-size: 18px; color: #CBDDF2;">工单处理</span>
          //         <span style="line-height: 30px; font-size: 18px; font-weight: 600; font-style: italic;  color: #D5D9FF;"> ${params.data.info.workOrderNum}条</span>
          //       </div>
          //       <div class="text-box">
          //         <span style="line-height: 30px; font-size: 18px; color: #CBDDF2;">通过率</span>
          //         <span style="line-height: 30px; font-size: 18px; font-weight: 600; font-style: italic; color: #8FE29A;"> ${params.data.info.passingRate}%</span>
          //       </div>  
          //     </div>
          //     </div>
          //   </div>
          //   `
          //   return htmlStr
          // },
        },
        geo3D: {
          map: "china",
          zlevel: -10,
          roam: true,
          // map3D 可以使用点击事件，而 geo3D 没有点击事件，
          // 可以两者同事使用，将 geo3D 设置为 show: fasle, 即可
          // show: false, 
          selectedMode: false, //是否允许选中多个区域
          shading: "realistic",  //  shading: realistic 类型, 地图贴图才可以成功
          realisticMaterial: {
            detailTexture: require("./bg4.jpg")
          },
          itemStyle: {
            // color: "#0C1C44", // 地图本身的颜色，相当于 areaColor
            color: "#fff", // 展示贴图
            opacity: 1,
            borderWidth: 1,
            borderColor: "#2768BE"
            // areaColor: '#fff'
          },
          viewControl: {
            autoRotate: false, // 自动开始旋转
            autoRotateAfterStill: 3,
            distance: 120,
            minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            animation: false, // 是否开启动画。[ default: true ]
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
          },

          emphasis: {
            disabled: true, //是否可以被选中
            label: {
              // 鼠标移入时的高亮文本
              show: true,
              color: "#333", // 显示字体颜色变淡
              fontSize: 18 // 显示字体变大
            },
            itemStyle: {
              color: "#D55500", // 显示移入的区块变高亮的颜色
              borderWidth: 2,
            }
          },
          label: {
            show: true,
            position: "top",
            color: "#fff", // 地图初始化区域字体颜色
            fontSize: 14,
            lineHeight: 16,
            textStyle: {
              color: "#fff", // 地图初始化区域字体颜色
              fontSize: 12,
              opacity: 1,
              backgroundColor: "rgba(0,23,11,0)",
              formatter: (params) => {
                console.log("name==", params)
                return params.name || '22';
              },
            },
          },
          light: {
            //光照阴影
            main: {
              // color: "#fff", //光照颜色
              intensity: 1, //光照强度
              //shadowQuality: 'high', //阴影亮度
              shadow: true, //是否显示阴影
              shadowQuality: "medium", //阴影质量 ultra //阴影亮度
              alpha: 55,
              beta: 10
            },
            ambient: {
              intensity: 0.7
            }
          }
        },
        //  series: [
        //   {
        //     map: "china",
        //     zlevel: -9,
        //     roam: true,
        //     // map3D 可以使用点击事件，而 geo3D 没有点击事件，
        //     // 可以两者同事使用，将 geo3D 设置为 show: fasle, 即可
        //     // show: false,
        //     selectedMode: false, //是否允许选中多个区域
        //     shading: "realistic", //  shading: realistic 类型, 地图贴图才可以成功
        //     realisticMaterial: {
        //       detailTexture: require("./bg4.jpg"),
        //     },
        //     itemStyle: {
        //       // color: "#0C1C44", // 地图本身的颜色，相当于 areaColor
        //       color: "#fff", // 展示贴图
        //       opacity: 1,
        //       borderWidth: 1,
        //       borderColor: "#2768BE",
        //       // areaColor: '#fff'
        //     },
        //     viewControl: {
        //       autoRotate: false, // 自动开始旋转
        //       autoRotateAfterStill: 3,
        //       distance: 120,
        //       minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
        //       maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
        //       minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
        //       maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
        //       animation: false, // 是否开启动画。[ default: true ]
        //       animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
        //       animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
        //     },

        //     emphasis: {
        //       disabled: true, //是否可以被选中
        //       label: {
        //         // 鼠标移入时的高亮文本
        //         show: true,
        //         color: "#333", // 显示字体颜色变淡
        //         fontSize: 18, // 显示字体变大
        //       },
        //       itemStyle: {
        //         color: "#D55500", // 显示移入的区块变高亮的颜色
        //         borderWidth: 2,
        //       },
        //     },
        //     label: {
        //       show: true,
        //       position: "top",
        //       color: "#fff", // 地图初始化区域字体颜色
        //       fontSize: 14,
        //       lineHeight: 16,
        //       textStyle: {
        //         color: "#fff", // 地图初始化区域字体颜色
        //         fontSize: 12,
        //         opacity: 1,
        //         backgroundColor: "rgba(0,23,11,0)",
        //         formatter: (params) => {
        //           console.log("name==", params);
        //           return params.name || "22";
        //         },
        //       },
        //     },
        //     light: {
        //       //光照阴影
        //       main: {
        //         // color: "#fff", //光照颜色
        //         intensity: 1, //光照强度
        //         //shadowQuality: 'high', //阴影亮度
        //         shadow: true, //是否显示阴影
        //         shadowQuality: "medium", //阴影质量 ultra //阴影亮度
        //         alpha: 55,
        //         beta: 10,
        //       },
        //       ambient: {
        //         intensity: 0.7,
        //       },
        //     },
        //   },
        // ],
        visualMap: [
          {
            show: true,
            type: 'continuous',
            seriesIndex: 0,
            calculable: true,
            right: 100,
            bottom: 40,
            min: 7000,
            max: 35000,
            inRange: {
              color: ['#10284C', '#265EB3']
            },
            textStyle: {
              color: '#333',
              fontSize: 16
            }
        }],
        graphic: { // 左上角操作按钮
          type: "text",
          x: 25,
          y: 25,
          style: {
            text: "返回",
            fill: "#333",
            font: 'bolder 1em "Microsoft YaHei", sans-serif'
          },
          onclick: () => {
            // 利用函数的作用域，可以直接拿上面的name来用
            if (this.citylist.length < 2) return;
            this.lastCity = this.citylist[this.citylist.length - 2];
            const name = Object.keys(this.lastCity)[0];
            const [grahpName, graphJson] = getMap(name);
            // 删除最后一个元素
            this.citylist.pop();
            // 很多操作重复了，可以将公共部分抽离出来
            option.geo.map = grahpName;
            this.$echarts.registerMap(grahpName, graphJson);
            this.charts.setOption(option, true);
          },
        },
      }

      this.myChart = this.$echarts.init(document.getElementById("mapEchart"));
      // 获取地图数据
      // 阿里生成的 china.json 数据无法显示省市文字
      // this.$echarts.registerMap("china", geoJson);

      // geo3D 和 series 配置选择其一进行配置
      const [mapName, mapJson] = getMap(this.cityMapName);
      this.$echarts.registerMap('china', mapJson)

      this.myChart.hideLoading();
      this.myChart.setOption(option);

      // this.myChart.getZr().on("click", (dom) => {
      this.myChart.on("click", (dom) => {
        console.log("dom==", dom)
        // 阻止散点图点击事件
        if (dom.seriesType === "scatter") return;
        // 暴露点击事件
        const { name: cityname, data } = dom;
        const name = cityname ? cityname : Object.keys(this.lastCity)[0];
        let code = "";
        if (dom.componentType === "series") {
          code = data?.areaUniCode ? data?.areaUniCode : this.lastCity[name];
        } else {
          code = this.lastCity[name];
        }
        const [mapName, mapJson] = getMap(name);
        if (mapJson) {
          // 是否暴露点击事件
          if (dom.componentType === "series") {
            this.citylist.push({ [name]: code });
          }
          this.mapClick(code, name);
        }
        if (!mapJson) return;

        // 渲染省份、地市的 map
        option.geo.map = mapName;
        // 设置为undefined，可以保证地图切换时总是居中
        option.geo.center = undefined;
        this.$echarts.registerMap(mapName, mapJson);
        this.charts.setOption(option);
      });
      // this.$refs["charts"].oncontextmenu = () => false;
    },

    
    // 向父组件提供点击事件，并提供点击省份的code和name
    mapClick(code, name) {
      console.log("code==", code)
      this.$emit("mapClick", { code, name });
    },
    // // 指定高亮区域
    mapActive(name) {
      console.log("province==", name)
      this.myChart && this.myChart.dispatchAction({
        type: "select",
        // geo 中名称
        name
      })
    },
    beforeDestroy() {
      this.myChart && this.myChart.dispose();
    }
  },
};
</script>

<style lang="scss" scoped>
.map {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
  .map-container {
    width: 100%;
    height: 100%;
    background: #fff;
    position: relative;
    .map-container-title {
      margin: 56px 0 16px;
      font-size: 24px;
      font-weight: 700;
      color: #333;
      line-height: 30px;
      display: flex;
      justify-content: center;
    }

    .map-chart {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      height: 100%;
      width: 100%;
    }
  }
}
</style>
